<template>
  <div class="home">
    <el-container>
      <el-header>
        <TopView @changeDelToken="changeDelToken"></TopView>
      </el-header>
      <el-container>
        <el-aside>
          <el-menu
              active-text-color="#3399CC"
              background-color="#D6DBDB"
              class="el-menu-vertical-demo"
              :default-active="active"
              text-color="#000"
              router
          >
            <!--router开启路由模式,进行跳转-->
            <template v-for="(item, index) in list" :key="index">
              <template v-if="item.children && item.children.length > 0">
                <el-sub-menu :index="item.path">
                  <template #title>
                    <component :is="item.meta.icon" class="btnIcon"></component>
                    <span>{{ item.meta.title }}</span>
                  </template>
                  <el-menu-item
                      v-for="i in item.children"
                      :key="i.path"
                      :index="i.path"
                  >
                    <span>
                      {{ i.meta.title }}
                    </span>
                  </el-menu-item>
                </el-sub-menu>
              </template>
              <template v-else>
                <el-menu-item :index="item.path">
                  <component :is="item.meta.icon" class="btnIcon"></component>
                  <span>{{ item.meta.title }}</span>
                </el-menu-item>
              </template>
            </template>
          </el-menu>
        </el-aside>
        <el-main>
          <div class="tab-top">
            <el-tabs
                v-model="active"
                :closable="listTab.length > 1"
                type="card"
                @tab-click="showItem"
                @tab-remove="deleteItem"
            >
              <el-tab-pane
                  v-for="item in listTab"
                  :key="item.path"
                  :label="item.meta.title"
                  :name="item.path"
              >
              </el-tab-pane>
            </el-tabs>
          </div>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, ref, watch, nextTick, toRaw} from "vue";
import {useRouter, useRoute} from "vue-router";
import LeftView from "@/components/LeftView.vue";
import TopView from "@/components/TopView.vue";
import {ElMessageBox} from "element-plus";
import {markRaw} from "vue";
import {SwitchButton} from "@element-plus/icons-vue";

export default defineComponent({
  name: "HomeView",
  components: {
    LeftView,
    TopView,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();

    const list = router.getRoutes().filter((v) => v.meta.isShow);

    console.log("路由", list);

    let listTab = ref<any>([]);

    let active = ref<any>("");

    const changeDelToken = () => {
      ElMessageBox.confirm("是否退出后台管理系统?", {
        confirmButtonText: "退出",
        cancelButtonText: "取消",
        type: "warning",
        icon: markRaw(SwitchButton),
      })
          .then(() => {
            localStorage.removeItem("token");
            router.push("/login");
          })
          .catch(() => {
          });
    };

    watch(
        () => router.currentRoute.value,
        (val) => {
          if (!val.meta || !val.meta.title) return;
          let index = listTab.value.findIndex(
              (f: any) => f.meta.title === val.meta.title
          );
          if (index === -1) {
            listTab.value.push(val);
            nextTick(() => {
              active.value = val.path;
            });
            return;
          }
          // 覆盖旧的路由信息
          listTab.value.splice(index, 1, val);
          active.value = listTab.value[index].path;
        },
        {immediate: true}
    );

    const showItem = (tab: any) => {
      let item = listTab.value.find((f: any) => f.path === tab.props.name);
      router.push({
        path: item.path,
      });
    };

    const deleteItem = (item: any) => {
      listTab.value = listTab.value.filter((f: any) => f.path !== item);
      let newItem = listTab.value[listTab.value.length - 1];
      router.push({
        path: newItem.path,
      });
    };

    return {
      list,
      changeDelToken,
      listTab,
      active,
      showItem,
      deleteItem,
    };
  },
});
</script>
<style lang="scss" scoped>
.el-header {
  height: 50px;
  background-color: #81898e;

  .logo {
    height: 50px;
  }

  h2,
  .quit-login {
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
  }

  .col-btn {
    height: 50px;
    line-height: 50px;
  }
}

.position-nav {
  margin: -18px 0px 5px 0px;
  padding: 0px 10px 0px 10px;
  height: 30px;
  line-height: 30px;
  background: #eee;
}

.el-aside {
  width: 145px;

  .el-menu {
    background: #D6DBDB;
    height: calc(100vh - 50px);

    .el-sub-menu {
      .btnIcon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
      }
    }

    .el-menu-item {
      .btnIcon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
      }
    }
  }
}

.el-main {
  padding: 5px;

  .tab-top {
    margin-bottom: 8px;
  }
}
</style>
